
<template>
    <h1>地图</h1>
    <el-button @click="getFood">查询附近的饭店</el-button>
    <div id="allmap"></div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";

const markers = reactive([]);
let map;

onMounted(() => {
    initMap();
})

function initMap() {
    map = new BMapGL.Map("allmap");    // 创建Map实例
    const point = new BMapGL.Point(116.404, 39.915);
     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别
}

function getFood() {
    markers.push(...[
        { lng: 116.404, lat: 39.915 },
        { lng: 116.514, lat: 39.921 }
    ]);

    // 打标记
    markers.forEach(item => {
        var point02 = new BMapGL.Point(item.lng, item.lat);
        var marker = new BMapGL.Marker(point02);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中
    })

}

</script>


<style lang="scss" scoped>
#allmap {
    width: 100%;
    height: 100%;
}
</style>
